<template>
  <el-form label-position="right" label-width="80px">
    <el-form-item label="关联类型">
      <el-radio-group v-model="type">
        <el-radio label="dict">数据字典</el-radio>
        <el-radio label="seq">编号规则</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label-width="0">
      <el-row :gutter="8">
        <el-col :span="16">
          <dict-table v-if="type === 'dict'" select height="300px" @rowSelect="selectDict"></dict-table>
          <seq-table v-else-if="type === 'seq'" select height="300px" @rowSelect="selectSeq"></seq-table>
        </el-col>
        <el-col :span="8">
          <el-table v-loading="loading" :data="dataSource" border height="300px">
            <el-table-column label="关联类型" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.callDict ? '数据字典' : '编号规则' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="关联指令" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.callDict || scope.row.callRule }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="danger" icon="el-icon-delete" circle @click="removeRelation(scope.row)" title="删除"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form-item>
  </el-form>
</template>

<script>
import DictTable from "@/views/system/db/dict/DictTable";
import SeqTable from "@/views/system/db/seq/SeqTable";
import IdeaTable from "@/mixins/IdeaTable";
export default {
  name: "ColumnRelation",
  components: {SeqTable, DictTable},
  mixins: [IdeaTable],
  props: {
    columnInfo: {
      type: Object,
      default: function () {
        return {}
      }
    },
    labDb: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  watch: {
    'columnInfo.jdbcName'(){
      this.loadSource()
    }
  },
  data(){
    return {
      type: 'dict'
    }
  },
  mounted() {
    this.rowKey = 'relationId'
    this.loadSource()
  },
  methods: {
    loadSource(){
      const body = {
        page: 1, pageSize: -1,
        filters: [
          { field: 'callDb', op: '=', value: this.labDb.callCmd },
          { field: 'jdbcTable', op: '=', value: this.columnInfo.jdbcTable },
          { field: 'jdbcColumn', op: '=', value: this.columnInfo.jdbcName },
        ]
      }
      this.dataSource.splice(0, this.dataSource.length)
      this.$post('ruleDb/queryPage', body)
        .then(res => {
          const { records } = res.data
          records.forEach(item => {
            this.dataSource.push(item)
          })
          this.$post('dictDb/queryPage', body)
              .then(res => {
                const { records } = res.data
                records.forEach(item => {
                  this.dataSource.push(item)
                })
              })
        })
    },
    selectSeq(row) {
      this.$post('ruleDb/save', {
        ruleId: row.ruleId,
        callRule: row.callCmd,
        callDb: this.labDb.callCmd,
        jdbcTable: this.columnInfo.jdbcTable,
        jdbcColumn: this.columnInfo.jdbcName,
      }).then(res => {
        this.$resultMsg(this, res)
        if (res.code === 200) {
          this.loadSource()
        }
      })
    },
    selectDict(row) {
      this.$post('dictDb/save', {
        typeId: row.typeId,
        callDict: row.callCmd,
        callDb: this.labDb.callCmd,
        jdbcTable: this.columnInfo.jdbcTable,
        jdbcColumn: this.columnInfo.jdbcName,
      }).then(res => {
        this.$resultMsg(this, res)
        if (res.code === 200) {
          this.loadSource()
        }
      })
    },
    removeRelation(row) {
      if (row.callDict) {
        this.removeUrl = 'dictDb/delete/'
      } else {
        this.removeUrl = 'ruleDb/delete/'
      }
      this.removeData(row)
    }
  }
}
</script>

<style scoped>

</style>